import React from 'react';
import { Typography } from 'antd';
import ChartRenderer from '../charts/charts/ChartRenderer';

const { Text } = Typography;

interface Props {
  viewMode: 'horizontal' | 'vertical';
  chartData: any;
  height?: number;
  verticalChartType: string;
  verticalDataLabelsLength: number;
  selectedDataIndex: number;
  lineStyleOptionsKey: string;
  markerOptionsKey: string;
  steppedOptionsKey?: string;
  scatterOptionsKey?: string;
  seriesCount: number;
}

const ChartDisplay: React.FC<Props> = ({
  viewMode,
  chartData,
  height = 450,
  verticalChartType,
  verticalDataLabelsLength,
  selectedDataIndex,
  lineStyleOptionsKey,
  markerOptionsKey,
  steppedOptionsKey,
  scatterOptionsKey,
  seriesCount,
}) => {
  return (
    <div style={{ width: '100%', height: '100%' }}>
      {viewMode === 'horizontal' && (
        <div style={{ marginBottom: '16px' }}>
          <Text type="secondary" style={{ fontSize: '12px' }}>
            共 {seriesCount} 个数据系列
          </Text>
        </div>
      )}
      {viewMode === 'vertical' ? (
        <ChartRenderer
          key={`vertical-${verticalChartType}-${verticalDataLabelsLength}-${selectedDataIndex}`}
          type={'vertical-compare' as any}
          data={chartData}
          height={height}
        />
      ) : (
        <ChartRenderer
          key={`mixed-${lineStyleOptionsKey}-${markerOptionsKey}-${steppedOptionsKey || 'none'}-${scatterOptionsKey || 'none'}-${seriesCount}`}
          type={'mixed' as any}
          data={chartData}
          height={height}
        />
      )}
    </div>
  );
};

export default ChartDisplay;


